import React, {
    PureComponent
} from 'react';

import {
    View,
    StyleSheet
} from 'react-native';

import ajax from './../../http';

import {
    Tip,
    Button,
    Empty,
    ListView
} from './../../components';

import {
    Actions
} from 'react-native-router-flux';

import VideoRow from './components/videoRow';

interface State {
    list: Array<any>
}

interface Props {
    tab: string,
    userId:number
}

class VideoContent extends PureComponent <Props, State> {

    static defaultProps = {
        tab:``,
        userId:0
    }

    state = {
        list: [],
        loading: true,
        isLastPage: false
    }

    get queryList() {
        const {
            list
        } = this.state;
        return list;
    }

    get url():any {
        const {
            tab
        } = this.props;
        switch (tab) {
            case `liked`:return `video/like/list`;
            case `launched`:return `video/launched/list`;
        }
    }

    get lastId() {
        const {
            length
        } = this.queryList;
        const {
            videoId = 0
        } = this.queryList[length - 1] || {} as any;
        return videoId;
    }


    private onRefresh = (done:Function) => {
        this.fetchList(0,done);
    }

    private onLoadMore = (done:Function) => {
        this.fetchList(this.lastId,done);
    }

    private fetchList = async (
        lastId:number=0,
        done:Function
    ) => {

        const {
            userId
        } = this.props;

        const _para = {
            limit: 30,
            userId: userId,
            lastId: lastId
        }

        let _list = [];
        let _success = true;

        try {
            const {
                list
            } = await (
                ajax.get(this.url, _para)
            )

            _list = list;

            const {
                list:stateList=[]
            } = this.state;

            this.setState({
                list:!!lastId ? [...stateList,...list]:list
            })
        }
        catch (e) {
            _success = false;
            Tip.warm({
                message: e.message
            })
        }
        done(_list,_success);
    }

    private renderItem = ({item}:any) => {
        return (
            <VideoRow
                data={item}
                onPress={this._toPage}
            />
        )
    }

    private addVideo = () => {
        Actions.push(`/record`)
    }

    private _toPage = (id:string) => {
        Actions.push(`/video/:videoId`, {
            videoId: id
        })
    }

    get Empty() {
        return (
            <Empty title="No videos in the list">
                <Button
                    title="Upload now"
                    style={styles.upload}
                    onPress={this.addVideo}
                />
            </Empty>
        )
    }

    render() {
        return (
            <ListView
                numColumns={3}
                data={this.queryList}
                onLoadTop={this.onRefresh}
                onLoadPage={this.onLoadMore}
                renderItem={this.renderItem}
                ListEmptyComponent={this.Empty}
                contentContainerStyle={styles.contentContainerStyle}
                ItemSeparatorComponent={() => <View style={styles.lineStyle}/>}
            />
        )
    }
}

export default VideoContent;


const styles = StyleSheet.create({
    lineStyle: {
        height: 10
    },
    contentContainerStyle: {
        paddingTop: 16,
        paddingHorizontal: 5
    },
    upload:{
        width:214,
        marginTop:50
    }
}) as any;